<script setup lang="ts">
// 导入文章布局组件 ArticleInfo，该组件提供了头部、内容、底部的插槽结构
import ArticleInfo from "@/components/ArticleInfo.vue";
</script>

<template>
    <!-- 使用 ArticleInfo 组件，并为其三个具名插槽填充内容 -->
    <ArticleInfo>
        <!--
            填充 header 插槽：
            - 使用 v-slot:header 指令绑定到 ArticleInfo 组件的 header 插槽
            - 此处填充了文章头部内容：简单的段落文本
        -->
        <template v-slot:header>
            <p>这是文章的头部区域</p>
        </template>

        <!--
            填充 content 插槽：
            - 使用 v-slot:content 指令绑定到 ArticleInfo 组件的 content 插槽
            - 此处填充了文章主体内容：简单的段落文本
        -->
        <template v-slot:content>
            <p>这是文章的内容区域</p>
        </template>

        <!--
            填充 footer 插槽：
            - 使用 #footer 简写语法（等价于 v-slot:footer）绑定到 footer 插槽
            - 此处填充了文章底部内容：简单的段落文本
        -->
        <template #footer>
            <p>这是文章的尾部区域</p>
        </template>
    </ArticleInfo>
</template>

<style scoped>
/* 局部样式区域，当前组件无需自定义样式，使用 ArticleInfo 组件的默认样式即可 */
</style>